<template>
	<view class="container">
		<view class="active-img" v-for="(item, index) in activityList" :key="item.id" @click="activityChange(item)">
			<zero-lazy-load :height="386" imgMode='aspectFill' :image="item.img"></zero-lazy-load>
		</view>
	</view>
</template>

<script setup>
	import {
		navigateTo,
		switchTab
	} from '@/utils/router.js'
	import { apiGetActivityList } from '@/api/group-buying.js'
	import { onMounted, ref } from 'vue'
	// computed: {
	// 	...mapState({
	// 		activityList: state => state.index.activityList
	// 	}),
	// },
	const activityList = [{
		id: 10,
		img: "https://qn.mtj.cdydsy.com/uploads/spread/20250414/image/16bea795b2ea0691a4b9fc286e42014c.png",
		title: "拼团活动",
		url: "/subPackages/group-buying/index"
	}]

	const activityChange = (item) => {
		const { url, id } = item;
		const isSubPackagesPath = url && url.split('/')[1] === 'subPackages';
		if (isSubPackagesPath) {
			navigateTo(`${url}?activity_id=${id}`);
		} else if (url) {
			switchTab(url);
		}
	}
	
	const params = ref({
		status: '1',
		pageNum: 1,
		pageSize: 10
	})
	
	const getData = async () => {
		try {
			const { data } = await apiGetActivityList(params.value);
		} catch (error) {
			//TODO handle the exception
			uni.showToast({
				title: error.message,
				icon: 'none'
			})
		}
		
		
	}
	
	onMounted(() => {
		getData();
	})
	
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 28rpx;

		.active-img {
			margin-top: 30rpx;
		}
	}
</style>